<template>
	<view class="content">
		<view class="balance-box">
			<view class="title">
				<image src="../../static/image/index/balance.png" mode=""></image>
				<view>可用余额（園）</view>
			</view>
			<view class="balance">
				<text>￥</text>
				{{myInfor.money}}
			</view>
			<view class="btn" @click="toWithdraw">提現</view>
		</view>
		<view class="my-card">
			<view class="title">我的銀行卡</view>
			<view class="one-card" v-for="(item,index) in backList" :key='index'>
				<view class="logo">
					<image src="../../static/image/index/bank-logo.png" mode=""></image>
				</view>
				<image class="bg-card" src="../../static/image/index/card-bg.png" mode=""></image>
				<view class="card-infor">
					<view>中國銀行 儲蓄卡</view>
					<view style="margin-top:24rpx;">**** **** **** 8880</view>
				</view>
			</view>
			<view class="add-card" @click="toAddCard">
				<image src="../../static/image/index/add-img.png" mode=""></image>
				<view>添加銀行卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { cardList } from '../../request/api.js'
	export default {
		data() {
			return {
				backList:[]
			};
		},
		methods:{
			// 去添加银行卡
			toAddCard(){
				uni.navigateTo({
					url:'/pages/my-wallet/add-card/add-card'
				})
			},
			toWithdraw(){
				uni.navigateTo({
					url:'/pages/withdraw-deposit/withdraw-deposit'
				})
			},
			async getList(){
				uni.showLoading({
					title:'加載中...'
				})
				let res=await cardList();
				uni.hideLoading();
				console.log(res);
				if(res.code==1){
					this.backList=res.data;
				}else{
					uni.showToast({
						title:res.msg,
						icon: 'none'
					})
				}
			}
		},
		onShow(){
			this.getList()
		},
		computed:{
			myInfor(){
				return this.$store.getters.myInfor
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
		.balance-box{
			width:702rpx;margin-left:auto;
			margin-right:auto;margin-top:26rpx;
			background-image: url('../../static/image/index/balance-bg.png');
			background-size: 100%;position:relative;
			padding:0 24rpx;padding-top:55rpx;
			box-sizing: border-box;height:260rpx;
			.title{
				display: flex;align-items: center;
				font-size:30rpx;color:#ffffff;line-height:42rpx;
				image{
					width:35rpx;height:35rpx;margin-right:5rpx;
				}
			}
			.balance{
				margin-top:23rpx;margin-left:39rpx;font-size:60rpx;
				color:#ffffff;
				text{
					font-size:30rpx;
				}
			}
			.btn{
				width:98rpx;height:45rpx;display:flex;align-items: center;
				justify-content: center;border-radius: 45rpx;
				background-color: #ffffff;color:#333333;font-size:24rpx;
				position: absolute;right:24rpx;bottom:80rpx;
			}
		}
		.my-card{
			margin-top:48rpx;width:702rpx;margin-left:auto;
			margin-right:auto;
			.title{
				font-size:30rpx;line-height:42rpx;color:#040404;
			}
			.one-card{
				width:702rpx;height:260rpx;margin-top:24rpx;
				background:  linear-gradient(180deg, #D65667 0%, #9E2031 100%);
				border-radius: 15px;overflow: hidden;position: relative;
				box-sizing: border-box;padding:24rpx;
				.logo{
					width:70rpx;height:70rpx;background-color: #ffffff;
					display: flex;align-items: center;justify-content: center;
					border-radius: 50%;
					image{
						width:48rpx;height:48rpx;
					}
				}
				.bg-card{
					width:260rpx;height:260rpx;opacity: 0.2;position: absolute;
					bottom:0;right:40rpx;margin-bottom:-95rpx;
				}
				.card-infor{
					position: absolute;top:78rpx;left:130rpx;
					font-size:36rpx;line-height:50rpx;
					color:#fff;
				}
			}
			.add-card{
				margin-top:24rpx;width:702rpx;height:130rpx;
				background-color: #F0F0F0;display: flex;align-items: center;
				box-sizing: border-box;padding-left:24rpx;
				font-size:26rpx;color:#9E9E9E;border-radius: 15rpx;
				image{
					width:26rpx;height:26rpx;margin-right:24rpx;
				}
			}
		}
	}
</style>
